<template>
  <div :style="{'background-image': 'url('+backgroundImage+')','padding': padding}" @keydown="handleEnter" id="login"
       ref="login" tabindex="10">
    <div :style="{width: width, height: height}" class="login-container">
      <section class="login-header">
        <img :src="oem.loginLogo?oem.loginLogo:defaultLogo" alt="logo" :onerror="defaultLogo"  class="logo">
        <div class="login-head-line"></div>
      </section>
      <section class="login-body" ref="loginBody">
        <div class="login-img">
          <img :src="loginImg" :style="{'max-width': maxWidth}" alt="图片" v-if="loginImgShow">
        </div>
        <div class="form-wrap">
          <div>
            <div class="name-wrap">
              <span class="appName">{{ app.appName }}</span>
            </div>
            <el-form :model="loginData" :rules="rules" class="login-form" ref="loginForm">
              <el-form-item prop="username">
                <el-input placeholder="请输入用户名" v-model="loginData.username">
                  <i slot="prefix" class="el-input__icon el-icon-user"></i>
                </el-input>
              </el-form-item>
              <el-form-item :class="{'login-err-pw-formitem': isError}" class="pwFormItem" prop="password">
                <el-input placeholder="请输入密码" type="password"
                         v-model="loginData.password">
                  <i slot="prefix" class="el-input__icon el-icon-lock"></i>
                </el-input>
              </el-form-item>
              <el-form-item>
                <div class="login-err" v-if="isError">
                  <i class="ios-alert-outline"></i>
                  {{ errText }}
                </div>
                <el-button :loading="loginLoading" @click="submitForm" class="btn" type="primary">登录</el-button>
                <div class="forget-passwd-wrap">
                  <span class="forget-passwd">
                    <i class="ios-help-circle-outline"></i>
                    <span>忘记密码?</span>
                  </span>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </section>

      <!-- footer -->
      <footer class="footer">
        <p>Copyright &copy; {{ oem.copyName }}</p>
      </footer>
    </div>
  </div>
</template>

<script>
import mixins from '../../mixins'
import axios from 'axios'

export default {
  name: 'LoginPage',
  props: {
    // 网站logo
    logo: {
      type: String,
      default: require('../../assets/img/logo-primary.png')
    },
    // 背景图片地址
    backgroundImage: {
      type: String,
      default: require('../../assets/img/login-bg.png')
    },
    // 后台登录接口
    loginUrl: String,
    // 是否自己处理回调
    delResponse: {
      type: Boolean,
      default: false
    }
  },
  mixins: [mixins()],
  data () {
    return {
      defaultLogo: 'this.src="' + this.logo + '";this.onerror=null',
      loginData: {
        grant_type: 'password',
        username: null,
        password: null
      },
      isError: false,
      errText: '',
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      loginLoading: false,
      maxWidth: '',
      loginImageWidth: 0,
      loginImageHeight: 0,
      loginImgShow: false,
      padding: '',
      width: '',
      height: ''
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    handleEnter (e) {
      if (e.which === 13) {
        this.submitForm()
      } else {
      }
    },
    submitForm () {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loginLoading = true
          const loginData = Object.assign({}, this.loginData)

          if (this.loginUrl) {
            axios
              .post(this.loginUrl, loginData)
              .then(res => {
                if (this.delResponse) {
                  this.$emit('loginSuccess', res)
                } else {
                  let redirect = decodeURIComponent(this.$route.query.redirect)
                  if (redirect === 'undefined' || redirect === '/') {
                    redirect = '/home'
                  }
                  this.$router.push({
                    path: redirect
                  })
                }
              })
              .catch(err => {
                if (err.response.status === 504) {
                  this.notice('error', '服务器已宕机,请重启服务器!')
                } else {
                  this.notice('error', err.response.data.error_description)
                }
              })
          } else {
            this.$store
              .dispatch('login', loginData)
              .then(res => {
                this.loginLoading = false
                let redirect = decodeURIComponent(this.$route.query.redirect)
                if (redirect === 'undefined' || redirect === '/') {
                  redirect = '/home'
                }
                this.$router.push({
                  path: redirect
                }).catch(() => {})
              })
              .catch(err => {
                this.loginLoading = false
                this.isError = true
                if (err.response) {
                  if (err.response.data.msg) {
                    this.errText = err.response.data.msg.includes('Bad credentials') ? '用户名或密码错误' : err.response.data.msg
                  } else {
                    switch (err.response.status) {
                      case 500:
                        this.errText = '服务器出错!'
                        break
                      case 504:
                        this.errText = '与服务器连接超时!'
                        break
                      default:
                        this.errText = '未知错误!'
                        break
                    }
                  }
                } else {
                  this.errText = '与服务器连接超时!'
                }
              })
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  $REM: 10/16;

  #login {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    background-position: center, center;
    background-repeat: no-repeat;
    background-size: cover;

    .login-container {
      display: flex;
      flex-direction: row;
      overflow: hidden;
      width: 100%;
      height: 100%;
      // padding: $REM*8rem 0;
      margin: 0 auto;
      align-items: center;
      justify-content: center;

      .login-header {
        text-align: center;
        padding: 0 7%;
        position: absolute;
        top: $REM*8rem;
        // margin-bottom: $REM*2rem;
        .logo {
          display: inline-block;
          height: $REM*5.5rem;
        }

        /*.login-head-line{
          width: 460px;
          height: 2px;
          background: linear-gradient(90deg, #009DF4, #00E9D0);
          opacity: 0.6;
          margin-top: 20px;
        }*/
      }

      .login-body {
        position: absolute;
        top: $REM*20rem;
        display: flex;
        align-items: center;
        padding: 20px 30px;
        width: 400px;
        height: 340px;
        background: #FFFFFF;
        box-shadow: 0px 7px 53px 0px rgba(26, 45, 167, 0.45);
        border-radius: 5px;

        .form-wrap {
          // display: flex;
          // align-items: center;
          // flex: 2;
          padding: 10px 0px;
          width: 100%;

          & div {
            height: auto;
          }

          .name-wrap{
            padding: 12px 0;
            font-size: 18px;
            text-align: center;

            .appName {
              font-size: $REM*2.4rem;
              font-weight: bold;
              letter-spacing: 5px;
            }

            .action-name {
              font-size: $REM*1.6rem;
            }

            .version{
              vertical-align: middle;
              display: inline-block;
              padding: 0px 6px;
              font-size: 14px;
              font-weight: normal;
              background: #ee3b15;
              color: #ffffff;
              border-radius: 1000px;
            }
          }

          .login-form {
            margin-top: $REM*2rem;

            .login-err-pw-formitem {
              margin-bottom: 0;
            }

            .login-err {
              line-height: 1.2;
              color: $--color-danger;
              margin: $REM*1.5rem 0;
              transition: all 0.2s;

              > i {
                font-size: $REM*1.4rem;
                position: relative;
                top: -$REM*.1rem;
              }
            }

            .btn {
              width: 100%;
              margin-top: 10px;
            }

            .forget-passwd-wrap {
              padding: $REM*.5rem 0;
              text-align: right;
              line-height: 1;

              .forget-passwd {
                &:hover {
                  cursor: pointer;
                }
                color: #666666;
                font-size: 8px;

                i,
                span {
                  vertical-align: middle;
                  line-height: 1;
                }

                i {
                  font-size: $REM*1.6rem;
                  color: $--color-primary;
                }
              }
            }
          }
        }
      }

      .footer {
        position: absolute;
        bottom: $REM*2.5rem;
        width: 100%;
        text-align: center;
        padding: 0 $REM*2rem;
        color: $--color-white;

        & p {
          font-size: $REM*1.3rem;
          white-space: normal;
        }
      }
    }
  }

  @media screen and (max-width: 750px) {
    #login .login-container {
      border-radius: $REM*2.4rem;
    }

    #login .login-container .login-body {
      justify-content: center;
      text-align: center;
    }

    .login-body {
      padding: 0 12% !important;

      > .login-img {
        display: none !important;
      }
    }

    #login .login-container .footer {
      bottom: $REM*2rem;
    }
  }
</style>
<style lang="scss">
  .login-form{
    .el-input__inner{
      border-radius: 0;
      border: none;
      border-bottom: 1px solid $--border-color-base;
    }
    .el-input__icon{
      color: $--color-primary;
    }
}
</style>
